<template>
  <Row class="artical">
    <Col span="24">
      <Form :model="artical" :label-width="80">
      <FormItem label="文章标题">
        <Input v-model="artical.title" placeholder="请输入文章的标题"></Input>
      </FormItem>
      <FormItem label="文章分类">
        <Select v-model="artical.type" placeholder="请选择分类">
          <Option value="beijing">js</Option>
          <Option value="shanghai">html</Option>
          <Option value="shenzhen">css</Option>
        </Select>
      </FormItem>
      <FormItem label="是否发布">
        <i-switch v-model="artical.publish" size="large">
          <span slot="open">开启</span>
          <span slot="close">关闭</span>
        </i-switch>
      </FormItem>
      <FormItem label="文本域">
        <Editer :content=artical.content ref="editer"></Editer>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="submitArtical()">提交</Button>
        <Button type="ghost" style="margin-left: 8px">取消</Button>
      </FormItem>
    </Form>
    </Col>
  </Row>

</template>
<script>
  import Editer from '@/components/common/editer/Editer'
  export default {
    data () {
      return {
        artical: {
          title: '',
          type: '',
          publish: true,
          content:''
        }
      }
    },
    methods:{
      submitArtical () {
        this.artical.content = this.$refs['editer'].getUEContent()
        console.log(this.artical);
      }
    },
    components:{
      Editer
    }
  }
</script>
<style scoped>
  .artical{
    padding:30px 20px;
  }
</style>
